<!--
 * @Description:
 * @Author: hanyu
 * @Date: 2020-01-20 09:38:08
 * @LastEditTime: 2022-03-07 22:57:11
 * @LastEditors: hanyu
 -->
<template>
  <Page ref="pages"
    class="page-school"
    :current="pageInfo.page"
    :page-size="pageInfo.pageSize"
    :total="pageInfo.pageTotal"
    transfer
    @on-change="changePage"
    @on-page-size-change="changePageSize"
    :show-sizer="false"
    show-total></Page>
</template>

<script>
/**
 * 分页组件
 * 示例参数
 * pageInfo:{
        page: 1, // 当前页数
        pageSize: 10, // 当前页面展示条数
        pageTotal: 20 // 数据总条数
 * }
 */
export default {
  // 接收参数
  props: {
    // 分页数据
    pageInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data () {
    return {
    };
  },
  watch: {
    pageInfo: {
      // 监听总条数，计算当前是第几页，返回事件
      handler: function (val) { // 特别注意，不能用箭头函数，箭头函数，this指向全局
        if (val.pageTotal / val.pageSize + 1 === val.page && val.page > 1) {
          this.pageInfo.page = val.page - 1;
          this.$emit('change', this.pageInfo);
        }
      },
      deep: true // 深度监听
    }
  },
  // 方法集合
  methods: {
    changePageSize (e) {
      this.pageInfo.pageSize = e;
      this.$emit('change', this.pageInfo);
    },
    // 分页改变
    changePage (e) {
      this.pageInfo.page = e;
      this.$emit('change', this.pageInfo);
    }
  }
};
</script>
<style lang='less' scoped>
</style>
